<template>
  <div class="blog-page">
    <nav-unit />
    <div class="content">
        <self-introduction />
        <blog-detail />
        <music-player />
    </div>
    <footer-unit />
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import SelfIntroduction from '@/components/Author/SelfIntroduction.vue'
import BlogDetail from '@/components/Blog/BlogDetail.vue'
import MusicPlayer from '@/components/Music/MusicPlayer.vue'
import FooterUnit from '@/components/Footer/FooterUnit.vue'

export default {
    name: 'BlogPage',
    components: {
        NavUnit,
        SelfIntroduction,
        BlogDetail,
        FooterUnit,
        MusicPlayer
    }
}
</script>

<style scoped>
    .content {
        display: flex;
        justify-content: space-between;
    }
</style>